vue 阻止事件冒泡常用的方法

在 Vue 中，阻止事件冒泡有两种常用方法： 1. 使用 `event.stopPropagation()` 方法： 在事件处理函数中，可以通过调用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。例如： ```html 点击我 export default { methods: { parentClick() { console.log('父元素被点击'); }, childClick(event) { event.stopPropagation(); console.log('子元素被点击'); }, }, }; ``` 在这个例子中，当点击按钮时，只会触发 `childClick` 方法，而不会触发 `parentClick` 方法。 2. 使用 Vue 的修饰符 `.stop`： Vue 提供了一种更简洁的方式来阻止事件冒泡，那就是使用 `.stop` 修饰符。例如： ```html 点击我 export default { methods: { parentClick() { console.log('父元素被点击'); }, childClick() { console.log('子元素被点击'); }, }, }; ``` 在这个例子中，我们在 `@click` 事件上添加了 `.stop` 修饰符，这样就可以阻止事件冒泡，只触发 `childClick` 方法。这种方法更简洁，推荐使用。

常用的vue阻止事件冒泡代码 :

1. @click.stop：在模板中使用，阻止点击事件冒泡。 ``` Click me ``` 2. event.stopPropagation()：在方法中使用，阻止事件冒泡。 ``` Click me export default { methods: { handleClick(event) { console.log('div clicked'); }, handleButtonClick(event) { event.stopPropagation(); console.log('button clicked'); } } } ``` 3. .stop：在指令中使用，阻止事件冒泡。 ``` Click me ```